<template>
	<div class="page">
		<el-table :cell-style="cellStyle" :header-cell-class-name="cellHeadStyle" :data="dataList" size="small" v-loading="loading"
			height="300px"  @sort-change="sortChangeHandle">
			<!-- <el-table-column prop="procInsName" min-width="160" label="标题" show-overflow-tooltip>
			</el-table-column> -->
			<el-table-column prop="procInsName" min-width="180px" show-overflow-tooltip label="标题">
				<template slot-scope="scope">
					<el-link type="primary" :underline="false" @click="detail(scope.row)">{{scope.row.procInsName}}</el-link>
				</template>
			</el-table-column>
			<el-table-column prop="createBy.name" label="发起人" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="createDate" label="日期" show-overflow-tooltip>
			</el-table-column>
			<!-- <el-table-column header-align="center" align="center" width="150" label="操作
				<template slot-scope="scope">
					<el-button v-if="hasPermission('extension:flowCopy:view')" type="text" icon="el-icon-view"
						size="mini" @click="detail(scope.row)">查阅审批</el-button>
					<el-button v-if="hasPermission('extension:flowCopy:del')" type="text" size="mini"
						icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
			:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
			layout="total, prev, pager, next">
		</el-pagination>
	</div>
</template>

<script>
	import tableStyles from '../../utils/mixins.js'
	import pick from 'lodash.pick'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				searchForm: {
					userId: '',
					procDefId: '',
					procInsId: ''
				},
				dataList: [],
				pageNo: 1,
				pageSize: 8,
				total: 0,
				orderBy: '',
				dataListSelections: [],
				isSearchCollapse: false,
				isImportCollapse: false,
				loading: false
			}
		},
		activated() {
			this.refreshList()
		},

		methods: {
			// 获取数据列表
			refreshList() {
				this.loading = true
				this.$http({
					url: '/extension/flowCopy/list',
					method: 'get',
					params: {
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						'orderBy': this.orderBy,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list
						this.total = data.page.count
						this.loading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},

			// 排序
			sortChangeHandle(obj) {
				if (obj.order === 'ascending') {
					this.orderBy = obj.prop + ' asc'
				} else if (obj.order === 'descending') {
					this.orderBy = obj.prop + ' desc'
				} else {
					this.orderBy = ''
				}
				this.refreshList()
			},
			detail(row) {
				this.$http.get('/flowable/task/getTaskDef', {
					params: {
						procInsId: row.procInsId,
						procDefId: row.procDefId
					}
				}).then(({
					data
				}) => {
					if (data.success) {
						this.$router.push({
							path: '/flowable/task/TaskFormDetail', //   dis用于实报和核定金额 历史还是办理时禁用
							query: {
								readOnly: true,
								attend: 0,
								dis: 0,
								title: row.procInsName,
								formTitle: row.procInsName,
								...pick(data.flow, 'formType', 'formUrl', 'procDefKey', 'taskDefKey',
									'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')
							}
						})
					}
				})
			},
			// 删除
			del(id) {
				let ids = id || this.dataListSelections.map(item => {
					return item.id
				}).join(',')
				this.$confirm(`确定删除所选项吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$http({
						url: '/extension/flowCopy/delete',
						method: 'delete',
						params: {
							'ids': ids
						}
					}).then(({
						data
					}) => {
						this.loading = false
						if (data && data.success) {
							this.$message.success(data.msg)
							this.refreshList()
						}
					})
				})
			},
			resetSearch() {
				this.$refs.searchForm.resetFields()
				this.refreshList()
			}
		}
	}
</script>
